@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin scrollbar ($width: 6px) {
    overflow: auto;
    &::-webkit-scrollbar {
        width: $width;
        height: $width;
        background: rgba(165, 165, 165, .1);
        &-thumb {
            min-height: 24px;
            border-radius: 20px;
            background-color: #dcdee5;
        }
    }
}

@mixin scrollbar-x ($width: 6px) {
    @include scrollbar;
    overflow-x: auto;
    overflow-y: hidden;
}

@mixin scrollbar-y ($width: 6px) {
    @include scrollbar($width);
    overflow-x: hidden;
    overflow-y: auto;
}

@mixin inlineBlock ($align: middle) {
    display: inline-block;
    vertical-align: $align;
}

@mixin middleBlockHack {
    &:before {
        @include inlineBlock;
        content: "";
        width: 0;
        height: 100%;
    }
}